<template>
  <view class="settings-container">
    <view class="settings-header">
      <text class="title">设置</text>
    </view>

    <view class="settings-content">
      <view class="settings-section">
        <text class="section-title">游戏设置</text>
        <view class="settings-list">
          <view class="setting-item">
            <text class="setting-label">音效</text>
            <switch 
              :checked="settings.soundEnabled"
              @change="updateSetting('soundEnabled', $event.detail.value)"
            />
          </view>
          <view class="setting-item">
            <text class="setting-label">通知</text>
            <switch 
              :checked="settings.notificationsEnabled"
              @change="updateSetting('notificationsEnabled', $event.detail.value)"
            />
          </view>
          <view class="setting-item">
            <text class="setting-label">自动保存</text>
            <switch 
              :checked="settings.autoSave"
              @change="updateSetting('autoSave', $event.detail.value)"
            />
          </view>
        </view>
      </view>

      <view class="settings-section">
        <text class="section-title">宠物设置</text>
        <view class="settings-list">
          <view class="setting-item">
            <text class="setting-label">宠物名称</text>
            <input 
              type="text"
              v-model="petName"
              placeholder="给宠物起个名字"
              @blur="updatePetName"
            />
          </view>
        </view>
      </view>

      <view class="settings-section">
        <text class="section-title">存档管理</text>
        <view class="settings-list">
          <view class="setting-item">
            <text class="setting-label">最后保存时间</text>
            <text class="setting-value">{{ formatLastSaveTime }}</text>
          </view>
          <view class="button-group">
            <button 
              class="btn save"
              @click="handleSaveGame"
            >
              保存游戏
            </button>
            <button 
              class="btn reset"
              @click="showResetConfirm"
            >
              重置游戏
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Settings',

  data() {
    return {
      petName: ''
    }
  },

  computed: {
    ...mapState({
      settings: state => state.gameState.settings,
      lastSaveTime: state => state.gameState.lastSaveTime,
      currentPetName: state => state.pet.name
    }),

    formatLastSaveTime() {
      if (!this.lastSaveTime) return '从未保存'
      const date = new Date(this.lastSaveTime)
      return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
    }
  },

  created() {
    this.petName = this.currentPetName
  },

  methods: {
    updateSetting(key, value) {
      this.$store.commit('updateSettings', { [key]: value })
    },

    updatePetName() {
      if (this.petName !== this.currentPetName) {
        this.$store.commit('setPet', { name: this.petName })
      }
    },

    handleSaveGame() {
      this.$store.dispatch('saveGame')
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
    },

    showResetConfirm() {
      uni.showModal({
        title: '重置游戏',
        content: '确定要重置游戏吗？所有进度将会丢失！',
        confirmColor: '#FF6B6B',
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch('resetGame')
            uni.showToast({
              title: '游戏已重置',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.settings-container {
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .settings-header {
    margin-bottom: 30rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .settings-section {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
      padding-left: 12rpx;
      border-left: 6rpx solid #FF6B6B;
    }
  }

  .settings-list {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }

  .setting-item {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

    &:last-child {
      border-bottom: none;
    }

    .setting-label {
      font-size: 28rpx;
      color: #333;
    }

    .setting-value {
      font-size: 24rpx;
      color: #666;
    }

    input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
      color: #333;
      text-align: right;
    }
  }

  .button-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    padding: 24rpx;

    .btn {
      padding: 20rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      text-align: center;
      border: none;

      &.save {
        background: #4CAF50;
        color: #fff;
      }

      &.reset {
        background: #FF6B6B;
        color: #fff;
      }

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
